<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PhyTouch.FullPage</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        html,body{
            margin: 0;
            padding: 0;
            text-align: center;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }

        *{
            box-sizing: border-box;
        }

        .section{
            width: 100%;
            font-size: 24px;
            overflow: hidden;
            position: relative;
        }
        .section .title{

            line-height: 100px;
            font-size: 24px;
        }
        #fullpage{
            visibility: hidden;
        }

        .site__header {
            /*-webkit-animation: bounceInUp 1s;*/
        }

        .powered{
            font-size: 20px;
            color: #454545;
            margin-top: 20px;
        }

        .section-main{
            position: absolute;
            top: 50%;
            margin-top: -150px;
            width: 100%;
            text-align: center;;
        }

        a{
            text-decoration: none;
        }

        #demo0{
            width: 160px;
            overflow: hidden;
            border: 1px solid rgb(204, 204, 204);
            text-indent: 10px;
            margin: 0 auto;
        }


        #demo0 ul {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            text-align: left;
        }

        #demo0 li {
            padding: 0 10px;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #fff;
            background-color: #fafafa;
            font-size: 14px;
        }

        #demo1{

            height: 210px;
            width: 220px ;
            margin: 0 auto;
            text-align: center;

        }
    </style>
    <style>
        *{
            box-sizing: border-box;
        }
        .progress{
            width: 100%;
            font-size: 0px;
            white-space: nowrap;
            position: fixed;
            bottom: 0px;
            height: 4px;
            background-color: #CCCCCC;
        }

        .progress-items{
            width: 100%;
            z-index: 2;
            height: 4px;
            position: absolute;
        }
        .progress-rate{
            width: 0%;
            z-index: 1;
            position: absolute;
            height: 4px;
            background-color: #00ABEB;
            transition: all .5s ease;
        }
    </style>
    <link href="asset/animate.min.css" rel="stylesheet" />
</head>
<body>
    <div id="fullpage" class="site__header">
        <div class="section">
            <div class="section-main">
                <div class="title animated" data-show="bounceInLeft"  data-hide="bounceOutLeft">PhyTouch Introduction</div>
                <div  data-delay="500"  class="animated" data-show="bounceInUp"  data-hide="zoomOut"><img src="asset/phy-touch.png"></div>

                <div  data-delay="1200"  class="powered animated" data-show="bounceIn infinite"  data-hide="bounceOut">By AlloyTeam</div>
            </div>

        </div>
        <div class="section">
            <div class="section-main">
            <div class="title animated"    data-delay="100" data-show="flipInY"  data-hide="flipOutY" >Powerful Features</div>
            <div   data-delay="400"  class="animated" data-show="zoomIn"  data-hide="zoomOut"><img src="asset/power.png"></div>
                </div>
        </div>
        <div class="section">
            <div class="section-main" style= "margin-top: -206px;">
                <div class="title animated"    data-delay="100" data-show="flipInY"  data-hide="flipOutY" >Scrolling Demo↓</div>
                <div id="demo0"  data-delay="400"  class="animated" data-show="zoomIn"  data-hide="zoomOut">
                    <div style="height: 250px;overflow: hidden;">
                        <ul id="scroller" style="list-style: none;text-align: left;font-size: 14px;">
                            <li>Hello, PhyTouch!</li>
                            <li>AlloyFinger</li>
                            <li>Transformjs</li>
                            <li>AlloyFlow - </li>
                            <li>Nuclear </li>
                            <li>AlloyGameEngine</li>
                            <li>Rosin</li>
                            <li>LivePool</li>
                            <li>AlloyStick</li>
                            <li>CodeStar</li>
                            <li>AlloyDesigner</li>
                            <li>JX</li>
                            <li>TEditor</li>
                            <li>JXAnimate</li>
                            <li>Spirit</li>
                            <li>AlloyImage</li>
                            <li>ModJS</li>
                            <li>Pretty row 16</li>
                            <li>stepify</li>
                            <li>AlloyTimer</li>
                            <li>Alloy Desktop</li>
                            <li>JX UI</li>
                            <li>CodeTank</li>
                            <li>iSpriter</li>
                            <li>Rythem</li>
                            <li>Go!Png </li>
                            <li> row 1</li>
                            <li> row 2</li>
                            <li> row 3</li>
                            <li>row 5</li>
                            <li> row 5</li>
                            <li> row 7</li>
                            <li> row 8</li>
                            <li> row 9</li>
                            <li> row 11</li>
                            <li> row 11</li>
                            <li> row 12</li>
                            <li> row 13</li>
                            <li> row 14</li>
                            <li> row 15</li>
                            <li> row 16</li>
                            <li> row 17</li>
                            <li> row 18</li>
                            <li> row 19</li>
                            <li> row 20</li>
                            <li> row 21</li>
                            <li> row 22</li>
                            <li> row 23</li>
                            <li> row 24</li>
                            <li style="border-bottom: none;"> row 25</li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
        <div class="section">
            <div class="section-main" style= "margin-top: -206px;">
                <div class="title animated"    data-delay="100" data-show="flipInY"  data-hide="flipOutY" >Rotation 3D Demo↓</div>
                <div id="demo1" ><img id="demo-img" src="asset/atLogo.png"></div>
            </div>
        </div>
        <div class="section">
            <div class="section-main">
            <div class="title animated"    data-delay="100" data-show="lightSpeedIn"  data-hide="lightSpeedOut" >Physical Feedback</div>
            <div  class="animated" data-delay="500" data-show="flipInX"  data-hide="flipOutX"><img src="asset/physics.png"></div>
        </div> </div>
        <div class="section">
            <div class="section-main">
            <div class="title animated"  data-delay="100" data-show="flipInY"  data-hide="flipOutY">Smooth Motion</div>
            <div  class="animated" data-delay="500" data-show="rotateIn"  data-hide="rotateOut"><img src="asset/speed.png"></div>
        </div>  </div>
        <div class="section">
            <div class="section-main">
            <div class="title animated"  data-delay="100" data-show="rollIn"  data-hide="rollOut">Simple API</div>
            <div  class="animated" data-delay="500" data-show="rotateIn"  data-hide="rotateOut"><img src="asset/simple.png"></div>
            </div>  </div>
        <div class="section">
            <div class="section-main">
            <div class="title animated"  data-delay="100" data-show="flipInY"  data-hide="flipOutY">Excellent Contributors</div>
            <div  class="animated" data-delay="500" data-show="flipInY"  data-hide="flipOutY"><img src="asset/contributors.png"></div>

            <div  class="animated powered" data-delay="900" data-show="bounceIn"  data-hide="bounceOut"> powered by <a href="https://github.com/AlloyTeam/PhyTouch">PhyTouch</a> FullPage Plugin and animate.css</div>
            </div> </div>
    </div>


    <div id="progress" class="progress">
        <div class="progress-rate"></div>
            <div class="progress-items">

        </div>

    </div>
    <a href="https://github.com/AlloyTeam/PhyTouch" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;width:140px;height:140px;">
        <img src="//alloyteam.github.io/github.png" alt="">
    </a>
    <script src="../transformjs/transform.js"></script>
    <script src="../index.js"></script>
    <script src="alloy_touch.full_page.js"></script>
    <script src="asset/progress_bar.js"></script>
    <script>
        var target = document.querySelector("#demo-img");
        //给element注入transform属性
        Transform(target,true);

        new PhyTouch({
            touch: "#demo1",//反馈触摸的dom
            vertical: false,//不必需，默认是true代表监听竖直方向touch
            target: target, //运动的对象
            property: "rotateY",  //被滚动的属性
            touchStart:function(evt){
                evt.stopPropagation();
            },
            bindSelf:true,
            touchMove:function(evt){
                evt.stopPropagation();
            }

        })

        var scroller = document.querySelector("#scroller");
        Transform(scroller,true);

        var at=new PhyTouch({
            touch:"#demo0",//反馈触摸的dom
            target: scroller, //运动的对象
            property: "translateY",  //被滚动的属性
            min:250-2000,
            touchStart:function(evt){
                evt.stopPropagation();
            },
            touchMove:function(evt){
                evt.stopPropagation();
            },
            bindSelf:true,
            max: 0 //不必需,滚动属性的最大值
        })


        var pb;
        var fp =  new PhyTouch.FullPage("#fullpage",{
            animationEnd:function () {

            },
            leavePage: function (index) {
               console.log("leave"+index)
            },
            beginToPage: function (index) {
               console.log("to"+index);
                pb.to(index / (this.length-1));
            }
        });
        pb = new ProgressBar("#progress",fp.length-1)


    </script>

</body>
</html>
